<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度</title>
</head>
<style>
*{
     font-size: 25px;
}

nav{
    display: flex;
    justify-content: space-between; 
    margin-top: 20px;
}

#menu{
    display: flex;
   gap: 20px;
  
}
li{
    list-style: none;
}
#denglu{
    background-color: blue;
    color: aliceblue;
    border-radius: 10px;
    padding: 4px 8px 4px 8px;
    border: none;
    font-size: 20px;
    width: 70px;
    margin-left: 20px;
} 
footer{
    display: flex;
     flex-wrap: wrap;
}
footer>li{
    font-size: 19px;

}
#main{
    /* vh     view height */
    height: 89vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
#form{
    /* background-color: aquamarine; */
    width: 80vw;
    height: 50vh;
    display: flex;
    align-items: center;
    flex-direction: column;  
}
#baiduyixia{
    background-color: blue;
    color: aliceblue;
    border-radius: 0px 10px 10px 0;
    border: 1px solid rgb(36, 54, 255);
    padding: 10px;
  
}
#sousuokuang{
    border-radius: 10px 0px 0px 10px;
    margin-right: -8px; 
    padding: 10px;
    width: 50vw;
}
</style>

<body>
    <!-- 头部  导航条 -->
     <nav>
        <div id="menu"> 
            <li>新闻</li>
            <li>hao123</li>
            <li>地图</li>
            <li>贴吧</li>
            <li>视频</li>
            <li>图片</li>
            <li>网盘</li>
            <li>文库</li>
            <li>更多</li>  
        </div>
        <div>
            <span>设置 </span>
            
            <input id="denglu" type="button" value="登录"> 

        </div> 
     </nav>
     <!-- 主区域 -->

     <div id="main">

        <div id="form">
            <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">


            <div>
                <input type="text" id="sousuokuang" placeholder="请输入搜索内容">
                <input type="button" id="baiduyixia" value="百度一下">
            </div>
        </div>


     </div>


<!-- 底部 -->
 <footer>

    <li>关于百度</li>
    <li>About Baidu</li>
    <li>使用百度前必读</li>
    <li>帮助中心企业推广</li>
    <li>京公网安备11000002000001号</li>
    <li>京ICP证030173号</li>
    <li> 互联网新闻信息服务许可证11220180008</li>
    <li>网络文化经营许可证:京网文(2023)1034-029号</li>
   
 </footer>


    
</body>
</html>